<template>
  <div>
    <el-button type="primary" @click="willAdd">添加</el-button>
    <!-- 列表 -->
    <!-- 3.传给list -->
    <v-List @willUpdate="willUpdate" :list="list" @init="init"></v-List>

    <!-- 弹框 -->
    <!-- 将list传给form 和init传过去-->
    <v-form :status="status" @cancel="cancel" :list="list" @init="init" ref="form"></v-form>

    <!-- 分页 -->
    <!-- 分页组件 -->
    <!-- 分页组件 
      layout="prev, pager, next" ：prev上一页 pager页码 next 下一页
      total表示总条目数，
      page-size用于设置每页显示的页码数量
      background：是否加背景
      current-change:页码发生了改变的事件，参数就是新的页码
    -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      background
      :page-size="size"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>
  
<script>
import vList from "./components/list.vue";
import vForm from "./components/form.vue";
import { requserlist, requsercount } from "../../http/api";

export default {
  components: {
    vList,
    vForm
  },
  data() {
    return {
      status: {
        isshow: false, //控制弹框是否出现
        isAdd: true //是添加的弹框还是编辑的弹框
      },
      // 1  初始化一个数组
      list: [],
      // 8.1 分页数据
      total: 0, //总数
      size: 2, //一页的数量
      // 8.6 定义page
      page: 1 //页数
    };
  },
  methods: {
    willAdd() {
      console.log("111");
      this.status = {
        isshow: true,
        isAdd: true
      };
    },
    //5.2 点击了编辑
    willUpdate(uid) {
      this.status = {
        isshow: true,
        isAdd: false
      };
      // 通过ref获取子组件的方法和数据
      this.$refs.form.getOne(uid);
    },
    cancel() {
      this.status = {
        isshow: false
      };
    },
    // 、4.1 一进来就去数据
    init() {
      // 请列表 + 请总数
      this.getList();
      this.getTotal();
    },
    // 8.2 获取管理员总数量
    getTotal() {
      // 发请求
      requsercount().then(res => {
        if (res.data.code == 200) {
          this.total = res.data.list[0].total;
        }
      });
    },
    getList() {
      // 8.4 修改size为this.size
      requserlist({
        page: this.page,
        size: this.size
      }).then(res => {
        if (res.data.code == 200) {
          //后端如果没有数据，返回的是null,但是el-table的data要数组，所以如果是null,转为[]
          // this.list = res.data.list ? res.data.list : [];//不直接赋值，
          // 8.9
          let arr = res.data.list ? res.data.list : [];
          //8. 删除最后一页的最后一条数据，如果不是第一页的话，需要展示上一页的数据了。
          /*arr是空数组： 当前页是第1页，代表就是没有数据了，那么list=arr;
                       当前页是第4页(非第1页)，代表还有数据的，只是当前这一页没有，应该取出上一页的数据给list*/
          // if(arr.length > 0){
          //   this.list = arr;
          // }else{
          //   if(this.page==1){
          //     this.list = arr;
          //   }else{
          //     // 重新获取列表
          //     this.getList()
          //   }
          // }
          
          
          if (arr.length == 0 && this.page != 1) {
            this.page--;
            this.getList();
            return;
          }
          this.list= arr
        }
      });
    },

    // 8.4 点击修改页码
    changePage(page) {
      // console.log("111");
      // 发请求
      // 8.5 此处的page为变量，改为this.page
      // requserlist({
      //   page: this.page,
      //   size: this.size
      // }).then(res => {
      //   if (res.data.code == 200) {
      //     //后端如果没有数据，返回的是null,但是el-table的data要数组，所以如果是null,转为[]
      //     this.list = res.data.list ? res.data.list : [];
      //   }
      // });
      // 8.7 先修改page
      this.page = page;
      // 再根据新的page发请求
      // this.init();只需要请列表，所以只需要b把getLIst调用就行
      this.getList();
      // 8.8 由于需要
      // 还需要调用getTotal，所以在8.9步封装
    }
  },
  mounted() {
    //   2.一进来就请数据(列表 + 总数)
    this.init();
  }
};
</script>

<style lang="less" scoped>
@import "../../less/index.less";
</style>